<template>
  <!-- 智能体信息 -->
  <el-row :gutter="40" style="height: 100%">
    <el-col :span="6">
      <el-table :data="agentList"
                style="width: 100%;--el-table-border-color: none;height:90vh;overflow-y: auto"
                :row-class-name="getClassName"
                :header-cell-style="customHeaderCell"
                :cell-style="customCell"
                @row-click="changeRow"
      >
        <el-table-column prop="agent" align="center" label="智能体名称"/>
      </el-table>
    </el-col>

    <el-col :span="18">
      <el-descriptions style="margin-bottom: 20px">
        <template #title>
          <span style="color: #fff;font-size: 14px">智能体详情</span>
        </template>
        <el-descriptions-item v-for="(item,key) in currentAgend" :key="key" :label="item[0] + ' :'"> {{item[1]}} </el-descriptions-item>
<!--        <el-descriptions-item label="电流："> {{currentAgend.generator}} </el-descriptions-item>-->
<!--        <el-descriptions-item label="电压："> {{currentAgend.voltage}} </el-descriptions-item>-->
<!--        <el-descriptions-item label="所属区域："> {{currentAgend.affiliation}} </el-descriptions-item-->
        >
      </el-descriptions>

      <el-table :data="communicationData"
                  style="width: 100%;--el-table-border-color: none;"
                :row-class-name="getClassName"
                :header-cell-style="customHeaderCell"
                :cell-style="customCell">
        <el-table-column prop="agent" label="通信对象" align="center" width="300" />
        <el-table-column prop="direction" label="通信类型" width="120" align="center"  />
        <el-table-column prop="message" label="通信内容" align="center"   />
      </el-table>
    </el-col>
  </el-row>

</template>

<script setup>
import {onBeforeMount, ref, watch} from "vue"


const {agentList} = defineProps({
  agentList:Array
})

let tableData = [];
tableData = agentList;
const currentAgend = ref([])
const communicationData = ref([])

watch(tableData,(newVal,oldValue) =>{
  console.log(newVal,oldValue)
  // currentAgend.value = newVal[0]
  // console.log(2222,newVal.messages)
  // communicationData.value = newVal[0].messages
})
// communicationData.value = agentList.value.length > 0 ? agentList.value[0] : []

const changeRow = (row) =>{
  console.log(row)
  communicationData.value = row.messages
  currentAgend.value = row.obs
}



const customHeaderCell = {
  color: '#fff',
  backgroundColor: "#2f4352",
  padding: '15px 0',
  fontSize: '14px',
  border: '1px solid #507e9c'
}

const customCell = {
  color: '#fff',
  padding: '10px 0',
  fontSize: '12px',
  border: '1px solid #507e9c',
  cursor:'pointer',
}

const getClassName = ({rowIndex}) => {
  return rowIndex % 2 === 0 ? 'odd-row' : 'even-row'

}

defineExpose({
  changeRow
})
</script>

<style scoped lang="scss">
@import "@/assets/styles/el-table.scss";

:deep(.el-descriptions__body){
  background-color: transparent;
}

:deep(.el-descriptions__label:not(.is-bordered-label)) {
  font-size: 14px;
  color: #fff;
}
:deep(.el-descriptions__content:not(.is-bordered-label)) {
  color: #fff;
  font-size: 12px;
}
</style>
